<template>
    <dx-swiper-dot :info="items.length" :current="currentIndex" field="content" mode="round" :dotsStyles="dotsStyles">
        <swiper class="swiper-group" :autoplay="autoplay" @change="swiperChange">
            <swiper-item v-for="(item, index) in items" :key="index">
                <uv-grid :customStyle="{ height: '100%', paddingBottom: '16px' }">
                    <uv-grid-item v-for="(item1, index) in item" :index="index" :key="index" :customStyle="{ height: '50%' }">
                        <text class="swiper-item-title" :style="'color:' + titleColor">{{ item1.name }}</text>
                        <view v-if="!item1.hide" style="display: flex; margin-top: 16rpx">
                            <text v-if="!item1.notMoney" class="swiper-item-unit" :style="'color:' + textColor">¥</text>
                            <text class="swiper-item-txt" :style="'color:' + textColor">{{ statInfo[item1.field] }}</text>
                        </view>
                        <view v-else style="display: flex; margin-top: 16rpx">
                            <!-- <text class="swiper-item-unit" :style="'color:'+textColor">¥</text> -->
                            <text class="swiper-item-txt" :style="'color:' + textColor">****</text>
                        </view>
                    </uv-grid-item>
                </uv-grid>
            </swiper-item>
        </swiper>
    </dx-swiper-dot>
</template>
<script setup>
import { ref } from 'vue';
const props = defineProps({
    statInfo: {
        type: Object,
        default() {
            return {};
        }
    },
    textColor: {
        type: String,
        default() {
            return '#fff';
        }
    },
    titleColor: {
        type: String,
        default() {
            return '#fff';
        }
    }
});
const currentIndex = ref(0);
const autoplay = ref(false);
const dotsStyles = {
    backgroundColor: '#CCCFF8',
    border: '1rpx solid #CCCFF8',
    color: '#fff',
    width: 3,
    height: 3,
    bottom: 8,
    spacing: 2,
    selectWidth: 16,
    selectedBackgroundColor: '#fff',
    selectedBorder: '1rpx solid #fff'
};
const items = [
    [
        { name: '销售总额', field: 'totalPayAmount', hide: false },
        { name: '订单总数', field: 'orderCount', notMoney: true, hide: false },
        { name: '佣金总额', field: 'estimatedCommission', hide: false },
        { name: '有效销售额', field: 'validPayAmount', hide: false },
        { name: '有效订单数', field: 'validOrderCount', hide: false, notMoney: true },
        { name: '有效佣金', field: 'validEstimatedCommission', hide: false }
    ],
    [
        { name: '退款金额', field: 'refundPayAmount', hide: false },
        { name: '退款订单总数', field: 'refundOrderCount', hide: false },
        { name: '退款佣金', field: 'refundEstimatedCommission', hide: false },
        { name: '退款率', field: 'refundRatio', hide: false }
    ]
];
const swiperChange = (e) => {
    currentIndex.value = e.detail.current;
};
</script>
<style lang="scss" scoped>
.swiper-group {
    width: 100%;
    height: 310rpx;
}

.swiper-item-group {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    flex: 1;
}

.swiper-item-title {
    font-size: 24rpx;
    font-family: MiSans-Regular, MiSans;
    font-weight: 400;
    line-height: 32rpx;
}

.swiper-item-unit {
    font-size: 24rpx;
    font-family: MiSans-Medium, MiSans;
    font-weight: 500;
    line-height: 44rpx;
}

.swiper-item-txt {
    font-size: 32rpx;
    font-family: MiSans-Medium, MiSans;
    font-weight: 500;
    line-height: 44rpx;
    margin-left: 2rpx;
}
</style>
